<template>
  <div>
    <button @click="getIp">获取ip</button>{{ip}}
    <button @click="getLocation">定位</button>
    <button @click="getOwn">当前位置</button>
    <button @click="openLocation">打开地图</button>
    <pick-location>2</pick-location>
    <map
    :show-location="true"
    id="myMap"
    style="width: 100%; height: 100vh;"
    :longitude="mark.lng" :latitude="mark.lat"
    scale='16'
    :markers="markers"
    :subkey="subkey"
    ></map>
  </div>
</template>

<script>
  let AV = require('leancloud-storage')
  import QQMapWX from '../../../lib/qqmap-wx-jssdk.js'
  import locationEX from '@/utils/location'
  import PickLocation from './pickLocation.vue'

  export default {
    data() {
      return {
        subkey: 'OOVBZ-IFOAJ-2Q6FV-KPNJP-646NV-PWFJQ',
        polyline: '',
        markers: [{
          iconPath: '/static/location.png',
          id: 0,
          // latitude: 31.37678130972113,
          // longitude: 121.26176426088189,
          // latitude: 23.099994,
          // longitude: 113.324520,
          width: 50,
          height: 50
        }],
        // ip: '139.227.72.11',
        ip: '101.93.130.235',
        mark: {lng: 121.26176426088189, lat: 31.37678130972113,},
        qqmapsdk: null,
        getMapLocation: null,
      }
    },
    components: {PickLocation},
    computed: {
      
      userJson() {
        return JSON.stringify(this.user)
      }
    },
    mounted() {
      // this.search()
      console.log('mounted ...')
    },
    methods: {
      getOwn() {
        wx.getLocation({
          type: 'gcj02',
          success:res=> {
            this.getMapLocation = {lat: res.latitude, lng: res.longitude}
            // this.mark = {lat: res.latitude, lng: res.longitude}
            // let [lng, lat] = locationEX.wgsToGc(res.longitude, res.latitude)
            let [lng, lat] = [res.longitude, res.latitude]
            this.markers[0].latitude = lat
            this.markers[0].longitude = lng
            this.mark = {lat, lng}
          }
        })
      },
      openLocation() {
        wx.openLocation({
          latitude: Number(this.mark.lat),
          longitude: Number(this.mark.lng),
          scale:18
        })
      },

      async getIp() {
        // let res = await this.$http.get('http://fangyuanxiaozhan.com/get_ip')
        let res = await this.$http.get('https://barefeet.mynatapp.cc/user/ip').catch(e=>{
        })
        console.log(res)
        this.ip = res.ip

      },

      async getLocation() {
        let {ip,subkey} = this
        let res = await this.$http.get(`https://apis.map.qq.com/ws/location/v1/ip?ip=${ip}&key=${subkey}`)
        console.log(res);
        let location = res.result.location
        // let [lng, lat] = locationEX.gcToWgs(location.lng, location.lat)
        let [lng, lat] = [location.lng, location.lat]
        console.log(lng, lat);
        
        location.lng = lng
        location.lat =lat
        this.mark = location
      },
      search() {
        this.qqmapsdk = new QQMapWX({
          key: this.subkey
        })
        setTimeout(() => {
          this.qqmapsdk.search({
            keyword:'酒店',
            success(res) {
              console.log(res);
              
            },
            fail(e) {
              console.log(e);
              
            }
          })
        }, 2000);
      },
      wxlogin() {
        return new Promise(async(resolve, reject)=> {
          let user = await AV.User.loginWithWeapp().catch(err=> console.log(err))
          this.user = user.toJSON();
          this.$store.commit('setUser',user)
          resolve(this.user)
        })
      },
    },
    async onLoad() {
      AV.init('91TtjFpYIeeLfxTlfYAo9GLT-gzGzoHsz','lLxPT0gKqEBd2Vk56OCjYfbp') 
      this.user = AV.User.current().toJSON()
      // setTimeout(async e => {
      //   let res = await this.wxlogin()
      //   console.log('login...', AV.User.current());
      // }, 2000);
      
    }
  }
</script>

<style scoped>

</style>